<template>
    <div class="search-bar">
        <input type="text" placeholder="请输入搜索地址" v-model="keyword">
        <div class="search-result" v-show="keyword.length>0">
            <ul class="result-result">
                <li v-for="(item) in tipList" :key="item.id"  @click="setAddress(item)">
                    <h4>{{item.name}}</h4>
                    <span>{{item.district}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {autocomplete} from '@/utils/map';
export default {
    data(){
        return {
            keyword:'',
            tipList:[],
            city:''
        }
    },
    watch:{
        async keyword(){
            try{
                let result = await autocomplete(this.keyword,this.city);
                console.log("result",result)
                this.tipList = result.tips;
            }catch(e){
                console.log(e);
            }
        }
    },
    methods:{
        setAddress(item){
            window.localStorage.setItem('positionData',`${item.district}${item.name}`);
            // this.SET_POSITION(`${item.district}${item.name}`);
            this.$router.push('/main')
        }
    }
}
</script>

<style lang="scss" scoped>
    .search-bar{
        @include size(100%,44px);
        @include border-1px(bottom);
        background: #fff;
        padding:0 15px;
        line-height: 44px;
        input{
            @include size(100%,30px);
            border-radius: 20px;
            border:none;
            outline:none;
            background: #eee;
            padding:0 15px;
        }

        .search-result{
            width:100%;
            position: fixed;
            top:44px;
            left:0;
            right:0;
            bottom: 0;
            background: rgba(0,0,0,.5);
            overflow: auto;
        }

        .result-list{
            background: #eee;
            padding:15px;
            @include border-1px(bottom)
        }
    }
</style>